<template>
  <div class="content-box">
    <heading class="title" grade="1">赛事签表 
      <small v-if="playRound>2" v-bind:class="{active:isSemifinal==false}" @click="isSemifinal = false">大签表</small> 
      <small 
        v-bind:class="{active:isSemifinal==true}"  @click="isSemifinal = true"
        v-if="playRound==7 || playRound==6 || playRound==5 || playRound==2" >
        半决赛
      </small>
    </heading>

    <template v-if="bigTableVisible && (isSemifinal == false)" >
        <div v-if="zoneNumber > 1">
          <ul class="clearfix">
            <li class="area" v-bind:class="{active:index == areaIndex}" @click="handleActive(index)"
              v-for="(item,index) in 4" :key="item" >
              {{index+1}}/4区
            </li>
          </ul>
        </div> 

        <ul class="round clearfix">
          <li class="round" v-for="item in roundList" :key="item" v-bind:style="{width: (1/roundList.length *100)+'%'}">
            {{item}}
          </li>
        </ul>

        <div class="clearfix check-tb">        
          <ul class="fl" v-for="item in dataList" :key="item" v-bind:style="{width: (1/dataList.length *100)+'%'}">
            <li v-for="game in item.matchScheduleResp" :key="game" class="relative game-item">
              <el-row>
                <el-col :span="20" class="center">
                  <div class="clearfix player-item" v-if="game.hostUserId">
                    <span class="seed-number" v-if="game.hostSeedValue!=10000">{{game.hostSeedValue || ''}}</span>
                    <span class="player hidden" v-if="!game.guestUserName.length && item.grade ==1">
                      {{game.hostUserName || game.hostUserId }}(轮空)
                    </span>
                    <span class="player hidden" v-else>
                      {{game.hostUserName || game.hostUserId}} 
                    </span>
                  </div>
                  <p class="vs" v-if="game.hostUserId && game.guestUserId">vs</p>
                  <div class="clearfix player-item" v-if="game.guestUserId"> 
                    <span class="seed-number" v-if="game.guestSeedValue!=10000">{{game.guestSeedValue || ''}}</span>
                    <span class="player hidden">{{game.guestUserName ||game.guestUserId || '轮空'}}</span>
                  </div>                
                </el-col>      
              </el-row> 
              <el-button v-if="false" size="small score-btn" class="orange-btn scorebtn" @click="openScore(game)">录入比分</el-button>
            </li>
          </ul>
        </div>
    </template>

    <template  v-else>
      <semifinal :isPreview="true"  :dataList="semiList "></semifinal>
    </template>
    
    
    <div class="btn-wrap">
      <router-link :to="'/race/detail/manage/createsigntable?id='+ $route.query.id+'&tasktype='+ $route.query.tasktype+'&isRun='+ $route.query.isRun + '&isedit=yes'">
        <el-button type="primary" size="large"> 修改签表 </el-button>
      </router-link>      
      <el-button  size="large" @click="buildSchedule()">
        创建赛程
      </el-button>
    </div>
  </div>
</template>

<script>
import Api from 'api/race'
import Semifinal from './components/Semifinal'
import {calcRound} from 'utils'
export default {
  components: {
    Semifinal
  },
  computed: {
  },
  created () {
    this.getDrawData()
  },
  watch: {
    // 监听路由变化拉取参赛者要求信息
    '$route': 'getDrawData'
  },
  data () {
    return {
      isSemifinal: false,
      bigTableVisible: false, // 大签表是否显示
      scoreVisible: false,
      zoneNumber: 1, // 分区数量
      game: {},
      homeScore: '',
      guestScore: '',
      areaIndex: 0, // 分区id
      dataList: [], // 展示的签表
      semiList: [], // 半决赛列表
      roundList: [],
      checkTableList: [], // 所有的签表
      playRound: 2 // 比赛轮次
    }
  },
  methods: {
    calcRound () {
      this.roundList = calcRound(this.playRound)
    },
    handleActive (index) {
      this.areaIndex = index
      this.dataList = this.checkTableList[index].grades
      this.handleSort()
    },
    buildSchedule () {
      this.$confirm('确认生成赛程？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        this.$router.push({
          path: '/race/detail/manage/generate',
          query: this.$route.query
        })
      })
    },
    getDrawData () {
      Api.getDrawData({matchId: this.$route.query.id}).then((res) => {
        let list = res.data
        this.zoneNumber = list.length
        if (this.zoneNumber > 1) { // 有分区,球队>=32
          this.checkTableList = list
          if (list[4]) {
            this.playRound = list[4].grades[1].grade
            this.semiList = list[4].grades
          }
          this.isSemifinal = false
        } else {
          this.playRound = list[0].grades.length
          if (this.playRound === 2) { // 4支
            this.semiList = list[0].grades
            this.isSemifinal = true
          }
          if (this.playRound === 3) { // 8支
            this.isSemifinal = false
          }
          if (this.playRound === 4) { // 16支
            this.semiList = list[0].grades.filter(item => {
              return item.grade > 2
            })
          }
        }
        this.bigTableVisible = this.playRound > 2
        this.dataList = list[0].grades
        this.handleSort()
        this.areaIndex = 0
        this.calcRound()
      })
    },
    handleSort () {
      this.dataList.sort(function (a, b) {
        return a.grade - b.grade
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/checktable.scss';   
</style>
